<script setup lang="ts">
import ModalComponent from '@runtime/module/Modal/ModalComponent';
import HomeContent from '@components/Apps/Simulation/HomeContent';
import SplashComponent from '@components/Splash/SplashComponent';
import { onMounted, ref, watch } from 'vue';
import MessageCode from '@components/Apps/Simulation/MessageCode';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import AssetLoaderComponent from '@runtime/UnityEngineBridge/AssetLoaderComponent';
import GameObjectComponent from '@runtime/UnityEngineBridge/GameObjectComponent';


//项目初始化    
async function enter() {
  await HomeContent.Default.Awake()

  //加载资源
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_GET_ASSET,'1'))
  let AssetList: any[] = []
  JSON.parse(newArr.Content).Result.forEach((item: any) => {
    AssetList.push(item.Asset)
  });
  //储存模型ID
  let MID = await AssetLoaderComponent.Default.LoadAllAsync(AssetList);
  HomeContent.Default.ModelID.value = MID
  // 隐藏模型
  await GameObjectComponent.Default.ShowHideAsync(MID[3],false);
  //系统初始化
  await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_INITIALIZE))

  HomeContent.Default.Loaded.value = false;
}
onMounted(async function () {
  //初始化链接
  await SplashComponent.Default.InitializeAsync()
  enter()
});

</script>

<template>
  <router-view></router-view>
  <div class="loading" v-show="HomeContent.Default.Loaded.value">
    <img src="/images/Benz600/arrow1.png" class="decoration_1">
    <img src="/images/Benz600/arrow2.png" class="decoration_2">
    <img src="/images/Benz600/tit.png" class="TitleImg">
    <div class="Block_box">
      <img src="/images/Benz600/Start_line.png" class="block_1 element">
    </div>
    <div class="Block_box_3">
      <img src="/images/Benz600/start_circle.png" class="block_3 element4">
    </div>
    <div class="Block_box_5">
      <img src="/images/Benz600/start_light.png" class="block_5 element2">
    </div>
    <div class="Block_box_6">
      <img src="/images/Benz600/start_line6.png" class="block_6 element3">
    </div>
    <div class="Block_box_7">
      <img src="/images/Benz600/start_line7.png" class="block_7 element">
    </div>
    <div class="Block_box_8">
      <img src="/images/Benz600/start_line5.png" class="block_8 element2">
    </div>
    <div class="Block_box_2">
      <img src="/images/Benz600/start_circle2.png" class="block_2 element3">
    </div>
    <div class="Block_box_4">
      <img src="/images/Benz600/start_earth.png" class="block_4 element">
    </div>
    <!-- 进度条 -->
    <div class="ProgressBar">
      <img src="/images/Benz600/progressbar_active.png" class="ProgressBarLine element10">
    </div>
    <img src="/images/Benz600/ic_benz.png" class="ic_benz">
    <img src="/images/Benz600/ic_arrow.png" class="ic_arrow">
  </div>
  <!-- <div class="watermark">
    内部开发版本，不代表最终品质，仅供测试！
  </div> -->
</template>
<style scoped>
/* @font-face {
  font-family: "PangMenZhengDao";
  src: url(../src/assets/font/PangMenZhengDao.TTF);
}*/

@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url(../src/assets/font/YouSheBiaoTiHei.TTF);
}

.loading {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  overflow: hidden;
  background-image: url('/images/Benz600/start_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 99;
}

.decoration_1 {
  width: 29px;
  position: absolute;
  right: 96px;
  top: 69px;
}

.decoration_2 {
  width: 36px;
  position: absolute;
  left: 116px;
  bottom: 219px;
}

.element {
  animation: rotate 6s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.element2 {
  animation: rotate2 12s linear infinite;
}

@keyframes rotate2 {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.element3 {
  animation: rotate2 6s linear infinite;
}

.element4 {
  animation: rotate 8s linear infinite;
}

.block_1 {
  width: 948px;
}

.block_2 {
  width: 719px;
}

.block_3 {
  width: 693px;
}

.block_4 {
  width: 517px;
}

.block_5 {
  width: 1025px;
}

.block_6 {
  width: 514px;
}

.block_7 {
  width: 522px;
}

.block_8 {
  width: 571px;
}

.Block_box {
  position: absolute;
  left: 468px;
  top: 20px;
}

.Block_box_2 {
  position: absolute;
  left: 600px;
  top: 120px;
  /* transform: rotateX(45deg) rotateY(20deg) rotateZ(10deg); */
}

.Block_box_3 {
  position: absolute;
  left: 613px;
  top: 134px;
  /* transform: rotateX(-35deg) rotateY(30deg) rotateZ(100deg); */
}

.Block_box_4 {
  position: absolute;
  left: 701px;
  top: 221px;
}

.Block_box_5 {
  position: absolute;
  left: 447px;
  top: 0px;
}

.Block_box_6 {
  position: absolute;
  left: 703px;
  top: 225px;
}

.Block_box_7 {
  position: absolute;
  left: 699px;
  top: 220px;
  /* transform: rotateX(150deg) rotateY(15deg) rotateZ(10deg); */
}

.Block_box_8 {
  position: absolute;
  left: 674px;
  top: 194px;
  /* transform: rotateX(210deg) rotateY(-15deg) rotateZ(100deg); */
}

.TitleImg {
  width: 400px;
  position: absolute;
  top: 390px;
  left: 760px;
}

.ProgressBar {
  width: 1237px;
  height: 34px;
  background-image: url('/images/Benz600/progressbar_bg.png');
  background-repeat: no-repeat;
  background-size: 120% 100%;
  background-position: 10% 0;
  position: absolute;
  left: 340px;
  bottom: 50px;
  line-height: 30px;
  text-align: left;
  padding: 0 17px;
  overflow: hidden;
}

.ProgressBarLine {
  width: 304px;
}

.element10 {
  animation: rotate10 3s linear infinite;
}

@keyframes rotate10 {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

.ic_benz {
  width: 47px;
  position: absolute;
  top: 309px;
  left: 937px;
}

.ic_arrow {
  width: 49px;
  position: absolute;
  top: 580px;
  left: 936px;
}
.watermark{
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-size: 34px;
  opacity: 0.3;
  pointer-events:none;
}
</style>
